<template>
	<view class="pcaPicker" @touchmove.stop.prevent="preventTouchMove">
		<view :class="popFlag?'popMask':''" @click="hide"></view>
		<view class="popBottom" :class="popFlag?'popRound':''">
			<view class="head">
				<text class="t1" @click="hide">关闭</text>
				<text class="t2" @click="confirm">确认</text>
			</view>
			<picker-view :value="pcaIndex" @change="pcaChange" @pickstart="pickstart" @pickend="pickend">
				<picker-view-column>
					<block v-for="(item,index) in selectDataArr" :key="index">
						<view class="seleName">{{item.name}}</view>
					</block>
				</picker-view-column>
				<picker-view-column v-if="selectType > 1">
					<block v-for="(item,index) in selectDataArr[pcaIndex[0]].childrenList" :key="index">
						<view class="seleName">{{item.name}}</view>
					</block>
				</picker-view-column>
				<picker-view-column v-if="selectType > 2">
					<block v-for="(item,index) in selectDataArr[pcaIndex[0]].childrenList[pcaIndex[1]].childrenArr"
						:key="index">
						<view class="seleName">{{item.name}}</view>
					</block>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			selectType: {
				type: [Number, String],
				default: 2
			},
			selectDataArr: {
				type: Array,
				default: () => {
					return [
						"childrenList"
					]
				}
			},

			//职业特殊处理 1
			selectSpecial: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {
				popFlag: false,
				pcaIndex: [0, 0, 0],

				isMoving: false //是否处于移动状态
			}
		},
		watch: {
			selectType(newValue) {
				if (newValue > 2) {
					this.pcaIndex = [50, 0, 0];
				} else {
					this.pcaIndex = [0, 0, 0];
				}
			},
		},
		computed: {


		},
		methods: {
			// 防穿透
			preventTouchMove() {},
			// 滚动切换
			pcaChange(e) {
				let currentIndex = e.detail.value;
				if (currentIndex[0] != this.pcaIndex[0]) {
					this.pcaIndex.splice(0, 3, currentIndex[0], 0, 0);
					return;
				}
				if (currentIndex[1] != this.pcaIndex[1]) {
					this.pcaIndex.splice(1, 2, currentIndex[1], 0);
					return;
				}
				if (currentIndex[2] != this.pcaIndex[2]) {
					this.pcaIndex.splice(2, 1, currentIndex[2]);
					return;
				}
			},
			// 显示
			show(e) {
				this.popFlag = true;
			},
			// 隐藏
			hide(e) {

				this.popFlag = false;
			},
			// 确认
			confirm(e) {

				if (this.isMoving) {
					console.log('不能点！！')
					return;
				}
				let current;

				//职业 特殊处理
				if (this.selectSpecial === 1) {

					if (this.selectDataArr[this.pcaIndex[0]].childrenList[this.pcaIndex[1]].name) {
						current = this.selectDataArr[this.pcaIndex[0]].childrenList[this.pcaIndex[1]].name
					} else {
						current = this.selectDataArr[this.pcaIndex[0]].name
					}
					this.pcaIndex = [0, 0, 0];
					this.$emit('selectConfirm', current);
					this.hide();
					return
				}


				if (this.selectType === 1) {
					current = this.selectDataArr[this.pcaIndex[0]].name
				} else if (this.selectType === 2) {
					current = this.selectDataArr[this.pcaIndex[0]].name + '-' + this.selectDataArr[this.pcaIndex[0]]
						.childrenList[this
							.pcaIndex[1]].name;

				} else if (this.selectType === 3) {
					current = this.selectDataArr[this.pcaIndex[0]].name + '-' + this.selectDataArr[this.pcaIndex[0]]
						.childrenList[this
							.pcaIndex[1]].name + '-' + this.selectDataArr[this.pcaIndex[0]].childrenList[this.pcaIndex[1]]
						.childrenArr[
							this
							.pcaIndex[2]].name;
				}
				if (this.selectType === 1) {
					this.pcaIndex = [0, 0, 0];
				}
				this.$emit('selectConfirm', current);
				this.hide();
			},
			pickstart() {
				this.isMoving = true;
			},
			pickend() {
				this.isMoving = false;
			}
		}

	}
</script>

<style>
	.pcaPicker>.popMask {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.7);
		z-index: 10000;
	}

	.pcaPicker>.popBottom {
		width: 100vw;
		background-color: #ffffff;
		font-size: 32rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		transition: all 0.3s ease;
		transform: translateY(100%);
		opacity: 0;
		z-index: 20000;
	}
	
	.seleName{
		font-size: 40rpx;
	}

	.pcaPicker>.popRound {
		transition: all 0.3s ease;
		transform: translateX(0);
		opacity: 1;
	}

	.pcaPicker>.popBottom>.head {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 30rpx 0 30rpx;
		border-bottom: 1px solid #f0f0f0;
	}

	.pcaPicker>.popBottom>.head>text {
		display: block;
		width: 100rpx;
		height: 100%;
		text-align: center;
		line-height: 80rpx;
		font-weight: bold;
	}


	.pcaPicker>.popBottom>.head>.t1 {
		color: #888888;
	}

	.pcaPicker>.popBottom>.head>.t2 {
		color: #000;
	}

	.pcaPicker>.popBottom>picker-view {
		height: 500rpx;
	}

	.pcaPicker>.popBottom>picker-view view {
		text-align: center;
		line-height: 68rpx;
	}
</style>